<script setup lang="ts">
import {defineAsyncComponent, onMounted, reactive, ref} from 'vue';
import {useAgentApi} from '/@/api/judicial/agent';

// 定义变量内容
const state = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			page: 1,
			page_size: 15,
			keywords: '',
			pay_method: '',
			pay_time: '',
		},
	},
	pay_method_data: [],
});

// 重置
const onResetSubmit = async () => {
	state.tableData.param = {
		page: 1,
		page_size: 15,
		keywords: '',
		pay_method: '',
		pay_time: '',
	};
	await onSearchSubmit();
};

// 搜索
const onSearchSubmit = async () => {
	await getTableData();
};

// 初始化表格数据
const getTableData = async () => {
	state.tableData.loading = true;

	await useAgentApi().getAgentRechargeListData(state.tableData.param).then((res) => {
		state.tableData.data = res.data.list;
		state.tableData.total = res.data.total;
		state.pay_method_data = res.data.pay_method_data;
	});
	setTimeout(() => {
		state.tableData.loading = false;
	}, 100);
};

// 分页改变
const onHandleSizeChange = (val: any) => {
	state.tableData.param.page_size = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: any) => {
	state.tableData.param.page = val;
	getTableData();
};
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<template>
	<div class="system-user-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">

			<div class="system-user-search mb15">
				<el-row :gutter="35">

					<el-col :xs="24" :sm="12" :md="5" :lg="5" :xl="5" class="mb10">
						<el-form-item label="">
							<el-input size="small" placeholder="关键词：代理名称、主体" v-model="state.tableData.param.keywords" class="w100" clearable></el-input>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="5" :lg="5" :xl="5" class="mb20">
						<el-form-item label="">
							<el-select size="small" v-model="state.tableData.param.pay_method" class="w100" placeholder="请选择资金形式">
								<el-option label="请选择" value=""></el-option>
								<el-option
									v-for="(item, index) in state.pay_method_data"
									:key="index"
									:label="item"
									:value="index">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="5" :lg="5" :xl="5">
						<el-form-item label="">
							<el-date-picker
								v-model="state.tableData.param.pay_time"
								type="datetimerange"
								start-placeholder="支付时间开始"
								end-placeholder="支付时间结束"
								format="YYYY-MM-DD HH:mm:ss"
								value-format="YYYY-MM-DD HH:mm:ss"
								size="small"
								clearable
							/>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
						<el-button size="small" type="primary" class="ml10 search-button" @click="onSearchSubmit()">
							<el-icon><ele-Search/></el-icon>
							查询
						</el-button>
						<el-button size="small" class="ml10" @click="onResetSubmit()">
							<el-icon><ele-SwitchButton/></el-icon>
							重置
						</el-button>
					</el-col>

				</el-row>
			</div>

			<el-table
				:data="state.tableData.data"
				v-loading="state.tableData.loading"
				border size="small"
				:header-cell-style="{backgroundColor: '#f8f8f8', color: '#010101'}"
				highlight-current-row
				style="width: 100%"
			>
				<el-table-column label="代理名称" prop="nickname" show-overflow-tooltip min-width="170" align="center"></el-table-column>
				<el-table-column label="所属主体" prop="software_name" show-overflow-tooltip min-width="170" align="center"></el-table-column>
				<el-table-column prop="menu_name" label="套餐名称" show-overflow-tooltip min-width="100" align="center"></el-table-column>
				<el-table-column prop="recharge_number" label="充值数量" show-overflow-tooltip min-width="100" align="center"></el-table-column>
				<el-table-column prop="order_amount" label="订单金额" show-overflow-tooltip min-width="100" align="center">
					<template #default="scope">
						<el-text>￥{{ scope.row.order_amount }}</el-text>
					</template>
				</el-table-column>
				<el-table-column prop="order_no" label="订单编号" show-overflow-tooltip min-width="150" align="center"></el-table-column>
				<el-table-column prop="create_time" label="创建时间" show-overflow-tooltip min-width="130" align="center"></el-table-column>
				<el-table-column prop="order_status_text" label="订单状态" show-overflow-tooltip min-width="100" align="center"></el-table-column>
				<el-table-column prop="pay_amount" label="支付金额" show-overflow-tooltip min-width="100" align="center">
					<template #default="scope">
						<el-text :type="scope.row.pay_amount > 0 ? 'danger' : 'info'">￥{{ scope.row.pay_amount }}</el-text>
					</template>
				</el-table-column>
				<el-table-column prop="pay_method_text" label="支付类型" show-overflow-tooltip min-width="100" align="center"></el-table-column>
				<el-table-column prop="pay_time" label="支付时间" show-overflow-tooltip min-width="130" align="center"></el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[15, 30, 50]"
				v-model:current-page="state.tableData.param.page"
				background
				v-model:page-size="state.tableData.param.page_size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.total"
			>
			</el-pagination>
		</el-card>
	</div>
</template>

<style scoped lang="scss">
.system-user-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;

		.el-table {
			flex: 1;
		}
	}
}
</style>